<template>
  <a-spin class="w-[100%]" :size="35" :loading="spinLoading" tip="正在处理, 请稍候...">
    <a-descriptions :column="2" bordered>
      <a-descriptions-item label="车牌号">
        {{ form.plateNumberName }}
      </a-descriptions-item>
      <a-descriptions-item label="车型名称">
        {{ form.vehicleModel }}
      </a-descriptions-item>
      <a-descriptions-item label="文件URL" :span="2">
        <template v-if="form.fileUrl">
          <a-link :href="form.fileUrl" target="_blank">
            {{ form.fileUrl }}
          </a-link>
        </template>
        <template v-else>无文件链接</template>
      </a-descriptions-item>
      <a-descriptions-item label="识别结果" :span="2">
        {{ form.identifyResult }}
      </a-descriptions-item>
    </a-descriptions>
  </a-spin>
</template>
<script setup>
import { ref, reactive, getCurrentInstance, watch } from "vue";
import { getApi } from "~/api/tc/plateNumber.js";

//全局实例
const { proxy } = getCurrentInstance();
//加载中...
const spinLoading = ref(false);
//接收父组件参数
const props = defineProps({
  params: {
    type: Object,
    default: () => {},
  },
});
//表单
const form = reactive({
  //车牌ID
  plateNumberId: null,
  //车牌号
  plateNumberName: null,
  //车型名称
  vehicleModel: null,
  //文件ID
  fileId: null,
  //文件URL
  fileUrl: null,
  //识别结果
  identifyResult: null,
});

//加载车牌详细信息
const loadPlateNumberInfo = (plateNumberId) => {
  spinLoading.value = true;
  getApi(plateNumberId)
    .then((res) => {
      //数据赋值
      if (res) {
        for (let key in res) {
          if (form.hasOwnProperty(key)) {
            form[key] = res[key];
          }
        }
      }
    })
    .finally(() => {
      spinLoading.value = false;
    });
};
//监听参数变化
watch(
  () => props.params,
  (newVal, oldVal) => {
    //车牌ID
    if (props.params.plateNumberId) {
      //加载车牌信息
      loadPlateNumberInfo(props.params.plateNumberId);
    }
  },
  { deep: true, immediate: true }
);
</script>
<style scoped></style>
